@import "../lib/page.scss";
@import "../lib/cards.scss";
@import "../lib/table.css";

@import "../../node_modules/@patternfly/patternfly/components/Page/page.css";
@import "../../node_modules/c3/c3.css";

.icon-2x-vms {
    font-size: 2em;
}
.icon-3x-vms {
    font-size: 3em;
}

.machines-width-max {
    width: 100%;
}

.usage-donut-caption {
    text-align: center;
    width: 200px;
}

.machines-disks-source {
    &-label {
        border-radius: var(--pf-global--BorderRadius--sm);
        padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
        margin-right: var(--pf-global--spacer--sm);
        background: var(--pf-global--BackgroundColor--300);
        color: var(--pf-global--Color--300);
    }

    &-label,
    &-value {
        font-size: var(--pf-global--FontSize--sm);
    }
}

.machines-listing-detail-top-column {
    vertical-align: top;
}

.machines-console-frame {
    height: 1px; /* keep at minimum, down-sizing does not work */
    margin-top: 1em;
}

.machines-console-frame-vnc {
    width: 100%;
    height: 100%;
    margin-top: -2em;
}

.left-delimiter {
    padding: 0 13px 0;
}

.left-delimiter + .left-delimiter {
    border-left: 1px solid #d1d1d1;
    padding-left: 15px;
}

.top-right-menu {
    float: right;
    padding-bottom: 5px;
    position: absolute;
    right: 5em;
}

.blue {
    color: var(--color-link);
}

.machines-desktop-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: var(--pf-global--spacer--md);
}

.machines-desktop-main-col {
    text-align: center;
    vertical-align: top;

    > button.pf-m-secondary {
        margin-bottom: var(--pf-global--spacer--sm);
    }
}

.machines-desktop-manual-con-details {
    display: inline-block;
    text-align: left;
}

.machines-desktop-shell-command {
    color: var(--color-subtle-copy);
}

.machines-desktop-more-info-container {
    display: inline-block;
    max-width: 40em;
}

.machines-desktop-more-info-text {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.machines-desktop-install-instructs {
    display: inline-block;
    padding: 0;
    margin: 0 2em 10px;
}

.machines-desktop-install-instructs-item {
    text-align: left;
}

.machines-desktop-install-instructs-row {
    display: inline-flex;
}

.machines-network-source-descr {
    color: var(--color-subtle-copy);
    text-align: right;
    padding: 5px 10px 5px 10px !important;
}

.machines-network-source-value {
    padding: 5px 10px 5px 10px !important;
    text-align: left !important;
}

.machines-network-up {
    color: green;
}

.machines-network-down {
    color: red;
}

.machines-network-source-link {
    cursor: pointer;
    text-decoration: underline;
    color: var(--alert-info-text);
}

.machines-listing-actions {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0;
}

.machines-listing-actions > button {
    margin: 0.25rem 0 0.25rem 0.5rem;
}

.machines-network-list {
    max-height: 500px;
    padding-bottom: 15px;
}

.panel-heading .btn {
    margin-left: 3px;
}

.console-actions-buttons {
    margin-left: 5px;
}

.console-actions {
    float: right;
    position: relative;
    top: -2em;
}

.machines-status-alert {
    padding-right: 5px;
}

#create-vm-dialog .spinner {
    display: inline-block;
}

#vcpus-tooltip.pficon-pending, #boot-order-tooltip.pficon-pending,
.machines-disks .pficon-pending, .pficon-ok{
    margin-left: 0.5rem;
}

.pficon-pending {
    color: #ec7a08;
    font-size: 16px;
}

.modal-footer .pficon-pending, .pficon-warning-triangle-o, .pficon-ok {
    line-height: inherit;
    margin-right: 0.5rem;
}

td > .utilization-bar-pf {
    width: 100%;
    min-width: 4em;

    > .progress {
        margin-bottom: 0;
        height: 0.5rem;
    }
}

.error.listing-ct-item,
table.listing-ct-table > tbody > tr:first-child.error {
    background-color: var(--color-ct-list-critical-bg) !important;  /* keep red background when expanded */
}

// Toast-related variables
$toast-stack-offset: 0.75rem;
$toast-anim-speed: 200ms;

// Notification wrapper styles that apply to both mobile and desktop
.toast-notification-wrapper {
    position: relative;
    display: inline;
    // WebKit (Safari, GNOME Web) somehow _still_ needs a prefix for stickiness
    position: -webkit-sticky;
    position: sticky;
    // Dialogs are z-index 1050 in PatternFly, inheriting from Bootstrap.
    // As we want notifications to be the topmost element except for dialogs,
    // we'll make it 1050 - 1 for the toasts.
    z-index: 1049;

    // Limit toast details to 33% of the viewport height
    .pf-c-alert h4 {
        max-height: 33vh;
        overflow: auto;
    }
}

// Notification stack (static & reversed, so new is on bottom) for mobile
@media screen and (max-width: 640px) {
    .toast-notification-wrapper {
        right: 0.5rem;
        bottom: 0;
        left: 0.5rem;
        position: fixed;
    }

    .toast-notifications-list-pf {
        display: flex;
        flex-direction: column-reverse;
        margin: auto;
        max-height: calc(100vh - 1rem);
        overflow: auto;
        position: static;

        .pf-c-alert {
            animation: toast-fade-in $toast-anim-speed ease-out;
            transform-origin: bottom;
        }
    }
}

// Notification stacking for desktop browsers
@media screen and (min-width: 641px) {
    .toast-notification-wrapper {
        // Toast grid can escape a 0 height flex without reflowing
        display: flex;
        height: 0;
        top: 0.5rem - $toast-stack-offset;
    }

    .toast-notifications-list-pf .pf-c-alert {
        // Animation for toasts fading & sliding in
        animation: toast-fade-in $toast-anim-speed ease-out;
        // Animations should happen from the top
        transform-origin: top;
        // Animation setup for the stack collapse & expanding
        transition: all $toast-anim-speed ease-out;
        // Delay the stacking until the fade-in animation is done
        transition-delay: $toast-anim-speed;
        margin: 0;
        max-width: calc(100vw - 4rem);
        width: 72ch;
        z-index: 2;

        // Animate CSS changes for the icon and other toast children
        .pf-c-alert__icon::before, a, p {
            transition: all $toast-anim-speed ease-out;
        }
    }

    .toast-notifications-list-pf {
        display: grid;
        grid-gap: 0.5rem;
        margin: $toast-stack-offset auto 0;
        max-width: 100% !important;
        position: static;

        // When hovering, expand the mouse area
        // better for jittery mice and people with tremor
        // and important for preserving the hover when dismissing
        // the bottom-most notification
        &:hover {
            border: 1px solid transparent;
            // Notifications are approximately 36px (== 3.6rem) tall; round up
            border-width: 0 4rem 5rem;

            .pf-c-alert {
                // Speed up hover animations on hover
                transition-delay: 0;
            }
        }

        // Collapsed list with progressive enhancement:
        // Require :focus-within support for hover collapsing to work,
        // so keyboard navigation always works with *all* browsers.
        // We're using :not() here as we want the default to be expanded
        // and for the notifications to collapse when not being hovered
        // or have focus inside (either expanding from tabbing to the elements
        // or persisting expansion after clicking a details link).
        &:not(:hover):not(:focus-within) {
            .pf-c-alert {
                // Collapse down everything but the last
                &:not(:last-child) {
                    // Complately fade text
                    color: transparent;
                    // Stack the cards
                    margin-bottom: -4.5rem;
                    // Fade the cards
                    opacity: 0.25;

                    > .pf-c-alert__icon::before {
                        // Fade the icon
                        color: transparent;
                        // Delay fading until toast appears and slides up
                        transition-delay: $toast-anim-speed * 2;
                    }
                }

                // All notifications, except when there's just one:
                // Hide text when collapsed
                &:not(:only-child) {
                    a, p {
                        opacity: 0;
                    }

                    p {
                        line-height: 0;
                        max-height: 0;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}

#virtual-machines-listing .listing-ct-body {
    overflow: visible;
}

@keyframes toast-fade-in {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
    }
}

.info-circle {
    padding: .5rem
}

.pf-c-dropdown__menu-item.pf-m-danger {
    color: var(--pf-global--danger-color--200);
}

.pf-c-table {
    .pf-c-table__toggle {
        padding-left: 0;
    }

    .btn-group {
        align-items: center;
    }

    > tbody > tr:not(.pf-c-table__expandable-row) > [data-label=Actions] .pf-c-button {
        // vertical: compensate for padding; fixing alignment
        // horizontal: add some needed padding
        margin:  -0.25rem 0.25rem;
    }
}
